<template>
  <div class="page-list-live">
    <PageList>
      <template #header>历史位置查询</template>
      <!-- 表单搜索 -->
      <template #filter>
        <ListFilter :form="topFilter" @search="handleSearch" @reset="handleReset"></ListFilter>
      </template>
      <!-- 按钮 -->
      <template #tips>
        <el-button icon="el-icon-delete" type="danger" @click="batchDeletion">批量删除</el-button>
      </template>
      <!-- 表格 -->
      <template #table>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol" @selectChange="handleSelectionChange">
          <template slot="col1" slot-scope="scope">
            <el-button :loading="scope.row.loadingDel" size="mini" icon="el-icon-delete" style="color: red;" type="text" @click="handleRowDel(scope.row)">删除</el-button>
          </template>
        </ListTable>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import { parseTime } from '@/utils/index'
  import { path } from '@/api/api'
  import ListFilter from "@/components/ListFilter"
  export default {
    components: { ListFilter },
    mixins: [listMixin],
    data() {
      return {
        deleteList: {
          id: ''
        },
        topFilter: {
          "employee.rfid": { label: '人员RFID', placeholder: '请输入人员RFID' },
          "car.rfid": { label: '车辆RFID', placeholder: '请输入车辆RFID' },
          "employee.accessCardID": { label: '门禁ID', placeholder: '请输入门禁ID' },
          "car.plateNumber": { label: '车牌号', placeholder: '请输入车牌号' },
          "baseStation.area.name": {
            label: '区域', placeholder: '请选择区域', type: 'select', arr: [
              { label: "安全区", value: "安全区" },
              { label: "危险区", value: "危险区" },
              { label: "考勤区", value: "考勤去" },
            ]
          },
          parntd: {
            label: '读卡设备', placeholder: '请选择读卡设备', type: 'select', arr: [
              { label: '门禁', value: 1 },
              { label: '基站', value: 2 },
              { label: '门禁 + 基站', value: 3 },
            ]
          },
          "employee.name": { label: '员工名称', placeholder: '请输入员工名称' },
          enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] }
        },
        tableData: [],
        tableCol: [
          { type: 'selection' },
          { type: 'index', label: '序号' },
          {
            label: '员工名称/车辆类型', formatter(row, col, cell) {
              let deptName = ''
              if (row.carId) {
                deptName = row.car.carType
              } else if (row.employeeId) {
                deptName = row.employee.name
              }
              return deptName || '--'
            }, minWidth: '144px'
          },
          {
            prop: 'employee.rfid', label: 'RFID', formatter(row, col, cell) {
              let rfid = ''
              if (row.carId) {
                rfid = row.car.rfid
              } else if (row.employeeId) {
                rfid = row.employee.rfid
              }
              return rfid || '--'
            }
          },
          {
            label: '门禁ID/车牌', formatter(row, col, cell) {
              let number = ''
              if (row.carId) {
                number = row.car.plateNumber
              } else if (row.employeeId) {
                number = row.employee.accessCardID
              }
              return number || '--'
            }, minWidth: '116px'
          },
          { prop: 'baseStation.area.name', label: '所在区域' }, //
          {
            label: '读卡设备名称', formatter(row, col, cell) {
              let name = ''
              if (row.carId && row.baseStation) {
                name = row.baseStation.name
              } else if (row.employeeId && row.baseStation) {
                name = row.baseStation.name
              }
              return name || '--'
            }
          },
          {
            prop: 'deptCode', label: '进入区域时间', formatter(row, col, cell) {
              return row.enterTime ? parseTime(new Date(row.enterTime)) : '--'
            }, minWidth: '150px'
          },
          {
            prop: 'enterTime', label: '离开区域时间', formatter: function (row, col, cell) {
              return row.leaveTime ? parseTime(new Date(row.leaveTime)) : '--'
            }, minWidth: '150px'
          },
          { label: '操作', custom: 'col1' }
        ]
      }
    },
    methods: {
      // 搜索
      handleSearch(obj) {
        this.getList({ ...obj, pageSize: 10 })
      },
      batchDeletion() {
        if (!this.deleteList.id) {
          this.$message.warning('请选择要删除的数据！')
          return
        }
        this.$_delConfirm("选中记录", () => {
          this.delRowReq(this.deleteList)
        })
      },
      // 选中事件
      handleSelectionChange(event) {
        if (event.length > 0) {
          let ary = []
          event.forEach(item => {
            ary.push(item.id)
          })
          if (ary.length > 1) {
            this.deleteList.id = ary.join(',')
          } else {
            this.deleteList.id = ary[0]
          }
        } else {
          this.deleteList.id = ''
        }
      },
      // 请求列表数据
      async getList(query) {
        this.tableLoading = true
        try {
          let obj = query || { pageIndex: 1, pageSize: 10, orderBy: 'createdTime', orderByAscent: false }
          const { data: { items: resData, count, pageIndex } } = await path('post', obj, false)
          this.tableData = []
          this.tableData = resData.map(item => {
            item.loadingEdit = false
            item.loadingDel = false
            return item
          })
          this.$nextTick(() => {
            this.$refs['RefListTable'].update({ page: pageIndex, count })
            this.tableLoading = false
          })
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      async delRowReq(row) {
        try {
          let obj = { id: row.id, value: null }
          await path('delete', obj, true)
          row.loadingDel = false
          await this.$router.push({ query: {} })
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } catch (err) {
          row.loadingDel = false
          this.$message({
            type: 'error',
            message: '删除失败'
          })
          console.error('handleRowDel err: ', err)
        }
      },
      handleRowDel(row) {
        row.loadingDel = true
        this.$_delConfirm(
          '记录',
          () => {
            this.delRowReq(row)
          },
          () => {
            row.loadingDel = false
          }
        )
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sc-list-filter-col {
    width: auto;
  }
</style>
